<template>
  <div id="Gun">
    <div style="margin: 30px auto; width: 1200px">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{ typeName[type] }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="list">
      <ul>
        <li v-for="(item, index, key) in GunList" :key="key">
          <el-image :src="'/api/' + item.photo" alt="">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
          <h3 style="color: #005599; font-weight: bolder; margin-top: 20px">
            {{ item.gunName }}
          </h3>
          <h5>{{ item.price }}￥</h5>
          <el-button type="danger" plain @click="to(item.id, item)"
            >立即购买</el-button
          >
        </li>
      </ul>
    </div>
  </div>
</template>
      
<script>
import { getData } from "../util/getData";
export default {
  data() {
    return {
      GunList: [],
      type: "",
      typeName: {
        ALL: "全部",
        AR: "突击步枪",
        CB: "卡宾枪",
        HG: "手枪",
        SMG: "冲锋枪",
        SG: "霰弹枪",
        DMR: "精确射手步枪",
        SR: "栓动步枪",
        MJ: "瞄具",
        PJ: "战术设备&配件",
        MGZ: "弹匣",
        FJ: "防具",
        OTHER: "其他",
      },
    };
  },
  methods: {
    to(gun, item) {
      this.$router.push({
        name: "gunDetail",
        params: { type: this.type, id: gun, gun: JSON.stringify(item) },
        props: true,
      });
    },
  },
  async created() {
    this.type = this.$route.params.type;
    console.log(this.type);
    this.$watch(
      () => this.$route.params,
      (toParams, previousParams) => {
        this.type = toParams.type;
        if (this.type) {
          this.type = this.type.toUpperCase();
          switch (this.type) {
            case "ALL":
              this.GunList = res.data;
              break;
            case "OTHER":
              let setMap = new Set([
                "AR",
                "CB",
                "DMR",
                "HG",
                "SG",
                "SMG",
                "SR",
              ]);
              this.GunList = res.data.filter((item) => {
                return !setMap.has(item.type);
              });
              break;
            default:
              this.GunList = res.data.filter((item) => {
                return item.type == this.type;
              });
              break;
          }
        }
      }
    );
    let res = await getData({ url: "/gunlist/findall" });
    if (this.type) {
      this.type = this.type.toUpperCase();
      switch (this.type) {
        case "ALL":
          this.GunList = res.data;
          break;
        case "OTHER":
          let setMap = new Set(["AR", "CB", "DMR", "HG", "SG", "SMG", "SR"]);
          this.GunList = res.data.filter((item) => {
            return !setMap.has(item.type);
          });
          break;
        default:
          this.GunList = res.data.filter((item) => {
            return item.type == this.type;
          });
          break;
      }
    }
  },
};
</script>
    
<style scoped>
#Gun {
  margin: auto;
  text-align: left !important;
  width: 1200px;
}
.list {
  margin: 0 auto;
  width: 1200px;
}
ol,
ul {
  list-style: none;
  padding: 0 !important;
}
li {
  display: inline-block;
  width: 300px;
  padding: 15px;
  height: 428px;
  margin: 35px 0 !important;
}
li > img {
  display: inline-block;
  width: 270px;
}

.el-button--danger.is-plain {
  margin-top: 10px;
  width: 100%;
  color: #373e46;
  background: #fff;
  border-color: #373e46;
  transition: 0.2s;
}

.el-button--danger.is-plain:hover {
  color: #fff;
  background: #b20000;
  border-color: #b20000;
  transition: 0.2s;
}
</style>